<template>
  <el-dialog title="设置条件" :visible.sync="visible" width="800px" append-to-body :close-on-click-modal="false" @closed="reset">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item class="flow-form-item" prop="conditions">
        <div v-for="(item, i) in form.conditions" :key="i">
          <el-card shadow="never" class="condition-card">
            <div slot="header" class="condition-title">
              <div>条件组</div>
              <el-link type="danger" :underline="false" @click="deleteConditions(i)">删除</el-link>
            </div>
            <div v-for="(node, index) in item.conditionNodes" :key="index">
              <div class="condition-content">
                <el-select v-model="node.column" placeholder="请选择字段" size="small" class="condition-content-item"
                           @change="handleColumn($event, i, index)">
                  <el-option
                    v-for="item in columnsOptions"
                    :key="item.comment"
                    :label="item.comment"
                    :value="item.column">
                  </el-option>
                </el-select>
                <el-select v-model="node.compare" placeholder="请选择比较符" size="small" class="condition-content-item"
                           @change="handleCompare($event, i, index)">
                  <el-option
                    v-for="dict in compareOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"/>
                </el-select>
                <el-input v-if="node.compare !== 'in' && node.compare !== 'not-in'" v-model="node.value" placeholder="请输入比较值"
                          size="small" class="condition-content-item end"></el-input>
                <div v-else class="condition-content-item end">
                  <el-tag :key="tag" v-for="(tag, a) in node.value" closable :disable-transitions="false" @close="deleteValue(i, index, a)">
                    {{ tag }}
                  </el-tag>
                  <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
                    size="mini" @keyup.enter.native="handleInputConfirm(i, index)" @blur="handleInputConfirm(i, index)">
                  </el-input>
                  <el-button v-else class="button-new-tag" size="mini" @click="showInput">添加值</el-button>
                </div>

                <el-link type="danger" :underline="false" @click="deleteNode(i, index)"><i class="el-icon-delete"></i></el-link>
              </div>
              <div v-if="index !== item.conditionNodes.length - 1">且</div>
            </div>
            <div class="condition-footer" style="padding: 0">
              <el-button size="small" icon="el-icon-circle-plus-outline" @click="addNode(i)">添加条件</el-button>
            </div>
          </el-card>
          <div v-if="i !== form.conditions.length - 1">或</div>
        </div>

        <div class="condition-footer">
          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addConditions()">添加条件组</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="submitting" @click="submitForm">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { allColumns } from "@/api/system/flowTemplate";

export default {
  name: "ConditionEdit",
  props: {
    compareOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      submitting: false,
      table: undefined,
      inputVisible: false,
      inputValue: undefined,
      columnsOptions: [{
        column: 'USER_ORG_ID',
        comment: '发起人所属组织',
        dataType: 'VARCHAR2'
      }],
      form: {
        conditions: []
      },
      rules: {
        /*conditions: [
          { required: true, message: "请至少添加一个条件", trigger: "change", type: 'array' }
        ]*/
      }
    }
  },
  methods: {
    init(table, conditions) {
      this.visible = true;
      this.table = table;
      if (conditions && conditions.length > 0) {
        this.form.conditions = JSON.parse(JSON.stringify(conditions));
      } else {
        this.addConditions();
      }
      this.initData();
    },
    initData() {
      allColumns(this.table).then(res => {
        if (res && res.length > 0) {
          this.$lodash.forEach(res, item => {
            this.columnsOptions.push({
              column: item.COLUMN_NAME,
              comment: item.COMMENTS,
              dataType: item.DATA_TYPE
            })
          });
        }
      });
    },
    addConditions() {
      this.form.conditions.push({
        conditionNodes: [{
          comment: undefined,
          column: undefined,
          dataType: undefined,
          compare: undefined,
          compareSymbol: undefined,
          value: undefined
        }]
      })
    },
    deleteConditions(i) {
      this.form.conditions.splice(i, 1);
    },
    addNode(i) {
      const conditionNodes = this.form.conditions[i].conditionNodes;
      conditionNodes.push({
        comment: undefined,
        column: undefined,
        dataType: undefined,
        compare: undefined,
        compareSymbol: undefined,
        value: undefined
      })
    },
    deleteNode(i, index) {
      const conditionNodes = this.form.conditions[i].conditionNodes;
      conditionNodes.splice(index, 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput[0].$refs.input.focus();
      });
    },
    handleInputConfirm(i, index) {
      let inputValue = this.inputValue;
      if (inputValue) {
        const conditionNodes = this.form.conditions[i].conditionNodes;
        const value = conditionNodes[index].value;
        value.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = undefined;
    },
    deleteValue(i, index, a) {
      const conditionNodes = this.form.conditions[i].conditionNodes;
      const value = conditionNodes[index].value;
      value.splice(a, 1);
    },
    handleColumn(val, i, index) {
      const conditionNodes = this.form.conditions[i].conditionNodes;
      const comment = this.$lodash.find(this.columnsOptions, o => o.column === val);
      conditionNodes[index].comment = comment ? comment.comment : "";
      conditionNodes[index].dataType = comment ? comment.dataType : "";
    },
    handleCompare(val, i, index) {
      const conditionNodes = this.form.conditions[i].conditionNodes;
      if (val === 'in' || val === 'not-in') {
        conditionNodes[index].value = [];
      } else {
        conditionNodes[index].value = undefined;
      }
      const compare = this.$lodash.find(this.compareOptions, o => o.dictValue === val);
      conditionNodes[index].compareSymbol = compare ? compare.dictLabel : "";
    },
    close() {
      this.visible = false;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitting = true;
          this.$emit("set-value", this.form.conditions);
          this.submitting = false;
          this.close();
        }
      });
    },
    // 表单重置
    reset() {
      this.table = undefined;
      this.inputVisible = false;
      this.inputValue = undefined;
      this.columnsOptions = [{
        column: 'USER_ORG_ID',
        comment: '发起人所属组织',
        dataType: 'VARCHAR2'
      }];
      this.form = {
        conditions: []
      };
      this.resetForm("form");
    }
  }
}
</script>

<style scoped>

</style>
